<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
export default {
  props: {
    // 图表配置项
    options: {
      type: Object,
      required: true,
    },
    // 动态数据
    data: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.resizeHandler);
    this.chartInstance.dispose();
  },
  watch: {
    options: {
      handler(newOptions) {
        this.chartInstance.setOption(newOptions, true);
      },
      deep: true,
    },
    data: {
      handler() {
        this.$nextTick(() => {
          this.updateChart();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chartContainer, this.mode);
      this.chartInstance.setOption(this.options);
    },
    resizeHandler() {
      // this.chartInstance.resize();
    },
    updateChart() {
      // 示例数据更新逻辑（需根据实际需求扩展）
      this.chartInstance.setOption({
        series: [
          {
            data: this.data,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
